<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hover动态白条</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .banner{position: relative;height: 474px;margin: 15px;width: 332px;}
        .banner a{display: block;height: 318px;overflow: hidden;}
        .banner img{border:0;vertical-align: top;}
        .banner a:before{content: "";position: absolute;width: 80px;height: 350px;top: 0;left: -150px;overflow: hidden;
        background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
        background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
        background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}
        .banner a:hover::before{-webkit-transition: left 1s;-moz-transition: left 1s;transition: left 1s;left: 460px;}
    </style>
</head>
<body>
    <div class="banner">
        <a href="#">
            <img src="http://img10.360buyimg.com/da/jfs/t1003/349/1161661169/22152/820110e1/557e2cc5Ne91d0f7e.jpg" alt="">
        </a>
    </div>
</body>
</html>